<template>
	<view class="container">
		<view class="top">
			<!-- <view class="beijin"><view class="dibu"></view></view> -->
			<view class="title" id="title">
				<view class="diqu" @click="addrpopup">
					<text class="wlIcon-weizhi1 wanl-text-black">{{citymsg.qxz}}</text>
				</view>
				<view class="diqu" @click="qiehuan">
					<text class="wlIcon-shezhi1 wanl-text-black">&nbsp;&nbsp;切换地址</text>
				</view>
			</view>
		</view>
		<!-- <view class="carousel-container">
			<swiper class="carousel" current="0" circular="true" autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.banner_url" mode="widthFix" />
				</swiper-item>
			</swiper>
		</view> -->
		<view class="addrbox" v-if="addrpop">
			<view class="mask" @click="addrshow"></view>
			<view class="box">
				<!-- <text class="iconfont back" v-if="erjishow" @click="addrpopup">&#xe6b1;</text> -->
				<view class="tit">请选择地区</view>
				<text class="closure" @click="addrshow">X</text>
				<view class="xuanz">
					<text class="yitext" :class="!erjishow ? 'choose' : ''">{{ yitext }}</text>
					<text class="yitext" :class="erjishow ? 'choose' : ''" v-if="erjishow">{{ ertext }}</text>
				</view>
				<view class="items" v-if="!erjishow">
					<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true"
						scroll-with-animation="true" style="height: 100%;">
						<view :id="index" class="left" v-for="(item, index) in AreaList">
							<text>{{ index }}</text>
							<view v-for="(items, indexs) in item" :key="indexs" class="addr" @click="erji(items)">
								{{ items.Name }}
							</view>
						</view>
					</scroll-view>
					<view class="right">
						<view :data-id="index" v-for="(item, index) in AreaList" @tap="bindToView">{{ index }}</view>
					</view>
				</view>
				<view class="items" v-else>
					<scroll-view class="scroller" scroll-y="true" scroll-with-animation="true" style="height: 100%;">
						<view class="left">
							<view class="addr" @click="quer(item)" v-for="(item, index) in AreaLists">{{ item.Name }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="activity">
			<view class="activity-section">
				<view class="content">
					<view class="activity-item-box" @click="getsmall('refresh',item.shoptype_id)"
						v-for="(item, index) in shoptype"
						:class="item.shoptype_id == shoptype_id ? 'activity-item-box-selected' : ''">
						<view class="activity-item">
							<view class="img">
								<image :src="item.icon" mode="scaleToFill"></image>
							</view>
							<text class="tip">{{item.name}}</text>
						</view>
					</view>
					<!--  -->
				</view>
			</view>
		</view>
		<view class="line-h b-b"></view>
		<!-- <empty v-if="shopList.length === 0 && loading === false" position="80"></empty> -->
		<view class="shop-container">
			<view class="shop-box b-b" v-for="(item,index) in shopList" :key="index" @tap="navdetail(item.id)">
				<view class="shop-image">
					<image class="image" mode="aspectFill" :src='item.shop_photo_image'></image>
				</view>
				<view class="shop-content">
					<text class="shop-line1">{{item.shop_name}}</text>
					<view class="shop-line2">
						<view class="shop-star">
							<text>营业时间：{{item.open_shijian}}</text>
						</view>
						<text class="shop-location"></text>
					</view>
					<view class="shop-line3">

						<view class="distance-box">
							<text class="distance" v-if="item.juli!=false">{{item.juli}}km</text>
							<text class="wlIcon-dizhi wanl-text-red"></text>
							<text class="distance">{{item.address}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Str4 from '@/common/str.js';
	var jweixin = require('jweixin-module')
	export default {
		data() {
			return {
				loadingType: 'more',
				carouselList: [],
				boxList: [

				],
				bigCategory: [{
					Id: 1,
					Name: '推荐'
				}, {
					Id: 2,
					Name: '附近'
				}, {
					Id: 3,
					Name: '最热'
				}],
				bigtabIndex: 25,
				index: 0,
				pageindex: 1,
				scrollTop: 0,
				productList: [],
				AreaList: [],
				AreaLists: [],
				tabIndex: 0,
				cityid: 0,
				// qxz: '',
				toView: '',
				yitext: '请选择',
				ertext: '请选择',
				addrpop: false,
				erjishow: false,
				type: '',
				shopList: '',
				loading: false,
				shoptype_id: '',
				lon: 0,
				lat: '',
				citymsg: [{
					qxz: '请选择地区',
					lon: '',
					cityid: '',
					lat: ''
				}],
				latitude: 0,
				shoptype: []

			};
		},
		onBackPress(event) {
			uni.switchTab({
				url: '../index/index'
			});
			return true;
		},
		onShow() {
			// this.dizhii();
			//let taht = this;
			let citymsg = Str4.localStorage.get('citymsg')
			console.log(this.citymsg, 'citymsg')
			if (citymsg == null) {
				// console.log('citymsg')
				this.addrpopup();
			} else {
				this.citymsg = citymsg;
				// console.log('2222222')
				this.getsmall('refresh', 0);
			}

			this.getArea(0);
			// this.getGoodsList(false)
		},
		onLoad() {
			this.getbanner();

			//this.dizhii();

		},
		onReachBottom() {
			if (this.loadingType == 'nomore') {
				return;
			}
			this.pageindex++;
			this.getsmall('add', 0);
		},
		methods: {
			...mapMutations(['setCityid']),
			addrshow() {
				this.getArea(0);
				this.addrpop = false;
				this.erjishow = false;
				// console.log('this.addrpop');
			},
			getbanner() {
				this.$api.post({
					url: '/wanlshop/Small/shoptype',

					success: res => {
						this.shoptype = res;

						this.shoptype_id = this.shoptype['0'].shoptype_id
						console.log(this.shoptype_id, 'shoptype_id');
					}
				})


			},
			// () {

			// 	// this.getArea()
			// },
			// 获取二级地区
			erji(items) {
				let id = items.Code;
				this.erjishow = true;
				this.yitext = items.Name;
				// console.log(items)
				this.getArea(id);
			},
			navdetail(id) {
				uni.navigateTo({
					url: `/pages/user/merchant/detail?id=${id}`
				})
			},
			// 确认地区
			quer(item) {
				this.ertext = item.Name;
				this.addrpop = false;
				console.log(item.Code);
				this.citymsg = {
						cityid: item.Code,
						qxz: this.yitext + ' / ' + this.ertext
					},
					uni.setStorage({
						key: 'cityid',
						data: item.id
					})
					Str4.localStorage.set('citymsg.cityid',this.cityid)
					Str4.localStorage.set('citymsg',this.citymsg)
					this.getsmall('refresh', 0);
			},
			bindToView(event) {
				var id = event.currentTarget.dataset.id;
				// console.log(id);
				this.toView = id;
			},

			// 获取地区
			getArea(id) {
				this.$api.post({
					url: '/wanlshop/Small/Areashi',
					data: {
						cityid: id
					},
					success: res => {
						// console.log(res);
						let data = res;
						if (!this.erjishow) {
							this.AreaList = data;
						} else {
							this.AreaLists = data;
						}
						// console.log(this.AreaList,'1111');
					}
				})
			},
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.goods_id;
				// console.log(item);
				// return
				uni.navigateTo({
					url: `/pages/ziti/product?id=${id}&cityid=${this.cityid}`
				});
			},
			// TooCar() {

			// },
			//导航点击
			bottomTabclick(index) {
				if (this.tabIndex == index) return;
				if (index != 1) {
					this.tabIndex = index;
				}
				if (index == 0) {
					// uni.switchTab({
					// 	url: '../index/index'
					// })
					// this.pageindex == 1;
				} else if (index == 1) {
					// this.pageindex == 1;
					uni.navigateTo({
						url: './cart'
					});
				} else if (index == 2) {
					// this.getclassify();
					uni.navigateTo({
						url: './fenlei'
					});
				} else if (index == 3) {
					// this.pageindex == 4;
					uni.navigateTo({
						url: './OrderList'
					});
				}
			},
			// 获取商品列表
			getsmall(type, shoptypes) {
				let that = this;
				//console.log(that.cityid);
				that.types = type;
				if (shoptypes != 0) {
					that.shoptype_id = shoptypes
				}

				if (type == 'refresh') {
					that.types = false;
				}
				this.$api.post({
					url: '/wanlshop/Small/small_list',
					data: {
						page: that.pageindex,
						limit: 10,
						cityid: that.citymsg.cityid,
						lat: that.citymsg.lat,
						lon: that.citymsg.lon,
						shoptype: shoptypes
					},
					success: res => {
						let shopList = res.data;
						console.log(shopList, 'shopList,')

						if (shopList.length == 0) {
							that.loadingType = 'nomore';
						}
						console.log(that.shopList)
						//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)

						that.loadingType = shopList.length < 10 * that.pageindex ? 'nomore' : 'more';
						if (type == 'refresh') {
							that.shopList = shopList;
							//console.log(111)
						} else {
							//console.log(222)
							that.shopList = that.shopList.concat(shopList);
							uni.stopPullDownRefresh();
						}
					}
				})

			},
			addrpopup() {
				// 记录进入app时的url
				if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
					window.entryUrl = location.href.split('#')[0]
				}
				let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				// 进行签名的时候  Android 不用使用之前的链接， ios 需要
				let signLink = isiOS ? window.entryUrl : location.href.split('#')[0];
				var uri = encodeURIComponent(signLink); //获取当前url然后传递给后台获取授权和签名信息
				this.$api.post({
						url: '/wanlshop/wechat/config',
						data: {
							url: uri
						},
						success: res => {
							jweixin.config({
								debug: false, //开启debug模式.正式环境设置为false,测试环境设置为true
								"appId": res.data.appId,
								"timestamp": res.data.timestamp,
								"nonceStr": res.data.nonceStr,
								"signature": res.data.signature,
								jsApiList: ["getLocation"] //根据需要看需要哪些SDK的功能
							});
							jweixin.ready(function() {
								jweixin.checkJsApi({
									jsApiList: [
										'getLocation'
									],
									success: function(res) {
										console.log('微信版本低22222')
										// console.log("jweixin.ready", res)
										if (res.checkResult.getLocation == false) {
											console.log('微信版本低')
											return;
										}
									},
									fail: function(res) {
										_this.getArea(0);
										console.log("jweixin.ready", res)
									}

								});
								jweixin.error(function(res) {
									_this.getArea(0);;
									_this.$wanlshop.msg('获取位置失败，请手动选择位置');
									_this.qiehuan();

								});
								// 获取位置
								jweixin.getLocation({
										type: 'wgs84',
										success: function(res) {
											console.log(res,'longitude')
													let lon = res.longitude;
													let lat = res.latitude;
													_this.lon = lon;
													_this.lat = lat;
													_this.$api.post({
														url: '/wanlshop/small/getcity',
														data: {
															lon: lon,
															lat: lat
														},
														success: res => {
															_this.citymsg =res;
															Str4.localStorage.set('citymsg',_this.citymsg)
															_this.getsmall("refresh");
														}
													})

													console.log('jssdk获取的位置:', res.longitude, res.latitude)
													_this.getList([res.longitude, res.latitude]) //通过经纬度去做需要的事情
											
										},
										cancel: function(res) {
											_this.$wanlshop.msg('您已禁止获取位置信息');
										}
										});

									console.log(res)
								

								
							})
							}
							})
						},
						// addrpopup1() {
						// 	console.log('addrpopup')
						// 	var that = this;
						// 	uni.getLocation({
						// 		type: 'wgs84',
						// 		success(res) {
						// 			console.log(res,'2222')
						// 			let lon = res.longitude;
						// 			let lat =res.latitude;
						// 			that.lon=lon;
						// 			that.lat=lat;
						// 			that.$http.post('index.php/api/Small/getcity', {
						// 				lon: lon,
						// 				lat: lat
						// 				}).then(res => {
						// 					//console.log(res.data.data.qxz,'999999')
						// 					that.citymsg = res.data.data;
						// 					//that.citymsg.cityid = res.data.data.cityid;
						// 					//console.log(that.citymsg)
						// 					Str4.localStorage.set('citymsg',that.citymsg)
						// 					that.getsmall("refresh");
						// 					// console.log(that.cityid )
						// 					// Str4.localStorage.set('citymsg.cityid',that.cityid)
						// 					// Str4.localStorage.set('citymsg.qxz',that.qxz)
						// 					// Str4.localStorage.set('citymsg.lat',lat)
						// 					// Str4.localStorage.set('citymsg.lon',lon)

						// 					})
						// 			//that.getGoodsList(true, lon, lat);

						// 			// that.computer(lon1, lat1);
						// 			// if ()
						// 		},fail(res) {
						// 		console.log(res,'33')

						// 		//that.qxz = res.address.city + '/' + res.address.district;
						// 			// that.getArea(0);
						// 			that.$api.msg('获取地址失败请手动选择地址');
						// 			that.addrpop = true;
						// 			that.erjishow = false;
						// 			that.yitext = '请选择';
						// 			that.ertext = '请选择';
						// 		}
						// 	});
						// },
						qiehuan() {
							this.addrpop = true;
							this.erjishow = false;
							this.yitext = '请选择';
							this.ertext = '请选择';
						},
						// computer(lon1, lat1) {
						// 	// var that = this;
						// 	this.productList.map(item => {
						// 		let PI = 3.14159265358979323; //圆周率
						// 		let R = 6371229; //地球半径
						// 		var lon2 = item.lon2;
						// 		var lat2 = item.lat2;
						// 		let x, y, distance;
						// 		let lonres = lon1 > lon2 ? lon1 - lon2 : lon2 - lon1;
						// 		let latres = lat1 > lat2 ? lat1 - lat2 : lat2 - lat1;
						// 		x = (lonres * PI * R * Math.cos((((lat1 + lat2) / 2) * PI) / 180)) / 180;
						// 		y = ((lat2 - lat1) * PI * R) / 180;
						// 		distance = Math.hypot(x, y);
						// 		if (distance >= 1000) {
						// 			item.juli = (distance / 1000).toFixed(2) + ' ' + 'km';
						// 		} else {
						// 			item.juli = distance.toFixed(2) + ' ' + 'm';
						// 		}
						// 	});
						// },
						navTo(url) {
							// console.log(url);
							uni.navigateTo({
								url: url
							});
						},
						onbigtabtap(e) {
							let preIndex = this.bigtabIndex;
							this.bigtabIndex = e.target.dataset.current || e.currentTarget.dataset.current;
							if (preIndex == this.bigtabIndex) return;
							this.pageindex = 1;
							// this.loadProducts('refresh');
						}
					}
				};
</script>

<style lang="scss">
	page {
		background-color: #eeeeee;
	}

	.activity-item-box-selected {
		border-bottom: 1px solid red;
	}

	.b-b:after {
		left: 0upx;
	}

	.shop-container {
		padding: 15upx 20upx;
	}

	.shop-box {
		display: flex;
		flex-direction: row;
		height: 200rpx;
		background-color: #fff;
		margin-bottom: 20px;
		align-items: center;
		position: relative;

		&.b-b:after {
			left: 190rpx;
		}

		.shop-image {
			width: 190rpx;

			.image {
				width: 170rpx;
				height: 170rpx;
				opacity: 1;
				border-radius: 10upx;
			}
		}

		.shop-content {
			display: flex;
			flex-direction: column;
			flex: 1;
		}
	}

	.shop-line1 {
		// font-size: $font-lg;
		height: 50rpx;
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.shop-line2 {
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		height: 30rpx;
		line-height: 30rpx;

		.shop-star {
			font-size: 28rpx;
			height: 30rpx;
			line-height: 30rpx;
			display: flex;
			flex-direction: row;
			color: #b8b8b8;
		}
	}

	.star:before {
		content: '\e63c';
		color: red;
		font-size: 22upx;
		margin-right: 8upx;
		vertical-align: middle;
	}

	.shop-line3 {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;

		.discription {
			font-size: $font-sm;
			color: $font-color-light ;
			padding-top: 10upx;
			width: 350rpx;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}

		.distance-box {
			height: 60rpx;
			line-height: 60rpx;
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: flex-start;

			.iconfont {
				color: $base-color;
				font-size: 38rpx;
				height: 60rpx;
				line-height: 60rpx;
			}

			.distance {
				font-size: $font-sm;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}

	.activity {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 40rpx;
		margin-bottom: 10rpx;

		.activity-section {
			width: 100%;
			padding: 0 20rpx;

			.content {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 20rpx;

				.activity-item-box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 25%;
					height: 160upx;

					.activity-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: $font-sm;
						color: $font-color-dark;

						.img {
							width: 60rpx;
							height: 60rpx;
							margin: 14rpx 0 6rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.tip {
							height: 60rpx;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}

	.addrbox {
		.mask {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 20;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.box {
			position: fixed;
			top: 10%;
			bottom: 0;
			left: 0;
			right: 0;
			height: 90%;
			background-color: #fff;
			z-index: 30;
			border-radius: 30rpx 30rpx 0 0;
			color: #000;

			.tit {
				text-align: center;
				padding: 20rpx 0 30rpx 0;
				font-size: 34rpx;
			}

			.closure {
				position: absolute;
				top: 30rpx;
				width: 50rpx;
				height: 50rpx;
				right: 50rpx;
				display: inline-block;
				background-color: rgba(0, 0, 0, 0.3);
				text-align: center;
				color: #fff;
				line-height: 50rpx;
				border-radius: 50%;
			}

			.xuanz {
				// padding: 10rpx 0;
				// height: 100%;
				margin-bottom: 10rpx;

				.yitext {
					padding: 10rpx 50rpx;
				}

				.choose {
					border-bottom: 2px solid #54c1f0;
				}
			}

			.items {
				height: 90%;
				display: flex;

				.scroller {
					.left {
						text {
							display: inline-block;
							background-color: #eeeeee;
							width: 100%;
							padding: 6rpx 10rpx;
							font-size: 30rpx;
						}

						.addr {
							padding: 10rpx 20rpx;
							border-bottom: #f4f4f4 1px solid;

							&:last-child {
								border-bottom: none;
							}
						}
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 85%;
					padding: 0 10rpx;
				}
			}
		}
	}

	.top {

		// position: relative;
		// height: 530rpx;
		.beijin {
			position: relative;
			height: 320rpx;

			background-size: 100%;

			.dibu {
				position: absolute;

				background-size: 100%;
				height: 50rpx;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}

		.title {
			// position: absolute;
			z-index: 999;
			display: flex;
			flex-direction: row;
			margin-top: 10rpx;
			justify-content: space-between;
			border-bottom: 4rpx solid white;

			// .back {
			// 	position: absolute;
			// 	top: 0;
			// 	left: 3%;
			// 	width: 50rpx;
			// 	height: 50rpx;
			// 	background-color: grba(0, 0, 0, 0.3);
			// }
			.diqu {

				display: flex;
				// justify-content: center;
				align-items: center;
				color: #000;
				font-size: 32rpx;
				margin: 0 30rpx;
				justify-content: flex-start;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;

				.yticon {
					padding-right: 20rpx;
				}
			}
		}
	}

	.carousel-container {
		// position: absolute;
		// border-radius: 18rpx;
		padding: 0 30rpx;
	}

	.carousel {
		.carousel-item {
			width: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.boxList {
		display: flex;
		justify-content: space-around;
		margin: 0 30rpx;
		padding: 10rpx 10rpx 20rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.itemBox {
			display: flex;
			align-items: center;
			width: 48%;

			image {
				width: 100%;
			}
		}
	}

	.bigCategory {
		margin: 20rpx 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		border-radius: 50rpx;

		.uni-bigtab-item {
			width: 140rpx;
			display: flex;
			justify-content: center;
			color: #b8b8b8;

			.uni-bigtab-item-title-active {
				background-color: #b8cbf0;
				color: #fff;
				width: 140rpx;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
			}
		}
	}

	.productList {
		margin: 20rpx 30rpx;
		// padding-bottom: 30rpx;
		border-radius: 20rpx;

		// height: 100%;
		.productBox {
			display: flex;
			align-items: center;
			align-content: center;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			box-shadow: 2rpx 4rpx 3rpx #ccc;
			padding: 20rpx;

			.img {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160rpx;
				height: 160rpx;
				margin-right: 30rpx;
				border-radius: 20rpx;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.xiangqing {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 65%;
				height: 180rpx;

				.title {
					height: 100rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 30rpx;
				}

				.xingxi {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.juli {
						display: inline-block;
						background-color: #e32d2a;
						color: #fff;
						padding: 6rpx 12rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.juli,
					.price {
						font-size: 26rpx;
					}
				}
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 86rpx;
		background: rgba(255, 255, 255, 1);

		.uni-tab-item-title {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 76rpx;

			.iconfont {
				font-size: 42rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-weight: bold;
			}

			.title {
				font-size: 22rpx;
				height: 26rpx;
				line-height: 26rpx;
			}
		}

		.uni-tab-item-title-active {
			color: $uni-color-primary;
		}
	}
</style>